<template>
	<view>
		<view class="formbox">
			<view class="formbox-item1">
				<view class="title">店名</view>
				<view class="value">
					<input type="text" v-model="name" placeholder-class="placeholderClass" placeholder="请输入店名" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">负责人</view>
				<view class="value">
					<input type="text" v-model="adminName" placeholder-class="placeholderClass" placeholder="请输入店名" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">负责人电话</view>
				<view class="value">
					<input type="text" v-model="adminPhone" placeholder-class="placeholderClass" placeholder="请输入店名" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">所在地区</view>
				<view class="value">
					<input disabled="disable" class="uni-input" placeholder-class="placeholderClass"
						placeholder="请选择省、市、区" v-model="areaCity" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">地址</view>
				<view class="value">
					<input type="text" v-model="address" placeholder-class="placeholderClass" placeholder="请填写地址" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">营业执照</view>
				<view class="addbox" @click="upload(1)">
					<view class="add-icon2" v-if="licenseUrl">
						<image :src="licenseUrl"></image>
					</view>
					<view class="add-icon" v-else>
						<image mode="aspectFill" src="../../static/add-icon.png"></image>
					</view>
					<view class="add-text" v-if="!licenseUrl">立即上传</view>
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">环境照片</view>
				<view class="box">
					<view class="imgbox" v-for="(img,index) in imgUrl">
						<image class="icon01" :src="img" @click="preview(index)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="fiexd-btn">
			<button @click="log">退出登录</button>
		</view>
	</view>
</template>

<script>
	import regionPicker from "@/components/region-picker/region-picker.vue"
	export default {
		components: {
			regionPicker
		},
		data() {
			return {
				provinceId: '',
				areaId: '',
				cityId: '',
				areaCity: '',
				name: '',
				address: '',
				pname: '',
				cname: '',
				aname: '',
				license: '',
				licenseUrl: '',
				img: '',
				imgUrl: [],
				adminName: '',
				adminPhone: '',
				shopId: -1

			}
		},

		onLoad(option) {

			if (option.id) {
				this.shopId = option.id;
			}
			this.detailInfo();
		},
		methods: {


			log() {
				let param ={};
				this.$api.logout(param).then(res => {
					
					if(res.code == 1){
						uni.redirectTo({
							url:'../login/login'
						})
					}
				})
			},
			preview(img) {

				uni.previewImage({
					current: img,
					urls: this.imgUrl
				})
			},
			detailInfo() {
				let that = this;
				let param = {
					shopId: this.shopId
				};
				this.$api.detail(param).then(res => {

					console.info(res);
					if (res.code == 1) {
						that.name = res.data.merchantName;
						that.areaCity = res.data.provinceName + res.data.cityName + res.data.areaName;
						that.address = res.data.address;
						that.licenseUrl = res.data.license;
						that.imgUrl = res.data.img;
						that.adminName = res.data.adminName;
						that.adminPhone = res.data.adminPhone;


					} else {
						that.$util.$showToast(res.msg, '', 'none');

					}
				})
			}


		}
	}
</script>

<style lang="scss">
	.formbox {
		padding-bottom: 220rpx;

		.formbox-item1 {
			margin: 0 40rpx;
			padding: 35rpx 0;
			border-bottom: 1rpx solid #e0e0e0;

			.title {
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 54rpx;
			}

			.addbox {
				width: 650rpx;
				height: 291rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				text-align: center;

				.add-icon {
					padding-top: 60rpx;

					image {
						width: 110rpx;
						height: 110rpx;
						margin-bottom: 32rpx;
					}
				}

				.add-icon2 {
					image {
						width: 650rpx;
						height: 291rpx;
					}
				}

				.add-text {
					color: #12ADA9;
					font-size: 28rpx;
				}
			}

			.box {
				display: flex;
				flex-wrap: wrap;

				.imgbox {
					background: #F8F8F8;
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					text-align: center;

					.icon01 {
						width: 160rpx;
						height: 160rpx;
					}

					.icon02 {
						width: 60rpx;
						height: 60rpx;
						margin: 50rpx 0;
					}
				}
			}


			.value {
				display: flex;

				.pickerbox {
					font-size: 28rpx;
					color: #BFBFBF;
					flex: auto;
				}

				input {
					font-size: 28rpx;
					color: #BFBFBF;
					flex: auto;
				}

				.right {
					width: 36rpx;
					height: 36rpx;
				}
			}

		}

		.formbox-item1:last-child {
			border-bottom: 0rpx;
		}
	}
</style>
